<template>
	<view class="container">
		<!-- 左侧学科侧边栏 -->
		<view class="sidebar">
			<view v-for="(subject, index) in subjectList" :key="subject.id || index"
				:class="['sidebar-item', { active: currentSubjectId === subject.id }]"
				@click="handleSubjectChange(subject.id)">
				{{ subject.name }}
			</view>
		</view>

		<!-- 右侧主内容区 -->
		<view class="main-content">
			<!-- 试卷列表区域 -->
			<view class="paper-table">
				<!-- 列表头部 -->
				<view class="table-header">
					<view class="header-col" style="width: 5%">序号</view>
					<view class="header-col" style="width: 15%">学科</view>
					<view class="header-col" style="width: 10%">状态</view>
					<view class="header-col" style="width: 20%">做题时间</view>
					<view class="header-col" style="width: 35%">时间</view>
					<view class="header-col" style="width: 15%">操作</view>
				</view>

				<!-- 列表内容 -->
				<view v-for="(paper, index) in paperList" :key="paper.id || index" class="table-row"
					@mouseenter="handleRowHover(paper, true)" @mouseleave="handleRowHover(paper, false)">
					<view class="row-col" style="width: 5%">{{ index + 1 }}</view>
					
					<view class="row-col" style="width: 15%">{{ paper.subjectName }}</view>
					<view class="row-col" style="width: 10%">
						<view :class="getStateClass(paper.status)">{{ paper.status }}</view>
					</view>
					<view class="row-col" style="width: 20%">{{ paper.doTime }}</view>
					<view class="row-col" style="width: 35%">{{ paper.createTime }}</view>
					<view class="row-col" style="width: 15%">
						<text class="operate-text" @click="handleViewPaper(paper)">
							查看试卷
						</text>
					</view>
				</view>

				<!-- 空状态 -->
				<view v-if="paperList.length === 0" class="empty-state">
					暂无符合条件的试卷
				</view>
			</view>

			<!-- 分页组件 -->
			<view class="pagination">
				<view class="page-btn" :class="{ disabled: pageIndex === 1 }" @click="handlePageChange(pageIndex - 1)">
					上一页
				</view>
				<view class="page-info">
					第 {{ pageIndex }} 页 / 共 {{ totalPage }} 页
				</view>
				<view class="page-btn" :class="{ disabled: pageIndex === totalPage }"
					@click="handlePageChange(pageIndex + 1)">
					下一页
				</view>
			</view>

			<!-- 右侧分数弹窗 -->
			<view class="score-popup" v-show="showScorePopup">
				<view class="popup-content">
					<view class="popup-row">
						<text class="popup-label">系统判分：</text>
						<text>{{ currentPaperInfo.systemScore }}</text>
					</view>
					<view class="popup-row">
						<text class="popup-label">最终得分：</text>
						<text>{{ currentPaperInfo.finalScore }}</text>
					</view>
					<view class="popup-row">
						<text class="popup-label">试卷总分：</text>
						<text>{{ currentPaperInfo.totalScore }}</text>
					</view>
					<view class="popup-row">
						<text class="popup-label">正确题数：</text>
						<text>{{ currentPaperInfo.correctCount }}</text>
					</view>
					<view class="popup-row">
						<text class="popup-label">总题数：</text>
						<text>{{ currentPaperInfo.totalCount }}</text>
					</view>
					<view class="popup-row">
						<text class="popup-label">用时：</text>
						<text>{{ currentPaperInfo.time }}</text>
					</view>
					<view class="close-btn" @click="showScorePopup = false">关闭</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import http from '../../http.js' // 假设已封装请求工具
	export default {
		name: "ExamPaperPage",
		data() {
			return {
				// 学科列表（接口返回 id、name）
				subjectList: [],
				// 当前选中的学科ID
				currentSubjectId: null,
				// 试卷列表数据
				paperList: [],
				// 分页参数
				pageIndex: 1,
				pageSize: 2,
				total: 0,
				// 右侧分数弹窗
				showScorePopup: false,
				currentPaperInfo: {
					systemScore: 0,
					finalScore: 0,
					totalScore: 0,
					correctCount: 0,
					totalCount: 0,
					time: 0
				}
			};
		},
		computed: {
			// 总页数计算
			totalPage() {
				return Math.ceil(this.total / this.pageSize);
			}
		},
		onLoad() {
			// 加载学科列表
			this.loadSubjects();
		},
		methods: {
			// 加载学科列表（假设接口返回 { id: '18', name: '英语' } 格式）
			loadSubjects() {
				http({
					url: '/api/student/education/subject/list',
					method: 'POST'
				}).then(res => {
					if (res.code === 1 && res.response) {
						this.subjectList = res.response;
						// 默认选中第一个学科
						if (this.subjectList.length > 0) {
							this.currentSubjectId = this.subjectList[0].id;
							this.loadPaperList(); // 加载试卷
						}
					}
				}).catch(err => {
					console.error("加载学科失败：", err);
				});
			},
			// 加载试卷列表（调用指定接口）
			loadPaperList() {
				if (!this.currentSubjectId) return;
				http({
					url: 'http://124.223.9.151:8000/api/student/exampaper/answer/pageList',
					method: 'POST',
					data: {
						subjectId: this.currentSubjectId, // 学科ID
						pageIndex: this.pageIndex,
						pageSize: this.pageSize
					}
				}).then(res => {
					if (res.code === 1 && res.response) {
						this.paperList = res.response.list || [];
						this.total = res.response.total || 0;
					} else {
						console.error("接口返回错误：", res.message);
						this.paperList = [];
						this.total = 0;
					}
				}).catch(err => {
					console.error("加载试卷失败：", err);
					this.paperList = [];
					this.total = 0;
				});
			},
			// 切换学科
			handleSubjectChange(subjectId) {
				this.currentSubjectId = subjectId;
				this.pageIndex = 1; // 重置页码
				this.loadPaperList(); // 重新加载试卷
			},
			// 分页切换
			handlePageChange(newPage) {
				if (newPage < 1 || newPage > this.totalPage) return;
				this.pageIndex = newPage;
				this.loadPaperList();
			},
			// 处理行悬停（模拟右侧弹窗触发，实际可根据需求调整）
			handleRowHover(paper, isEnter) {
				if (isEnter) {
					// 这里可调用接口获取试卷详情，填充 currentPaperInfo
					this.currentPaperInfo = {
						systemScore: paper.systemScore || 0,
						finalScore: paper.finalScore || 0,
						totalScore: paper.totalScore || 0,
						correctCount: paper.correctCount || 0,
						totalCount: paper.totalCount || 0,
						time: paper.time || 0
					};
					this.showScorePopup = true;
				} else {
					this.showScorePopup = false;
				}
			},
			// 查看试卷操作
			handleViewPaper(paper) {
				// 跳转到试卷详情页，传递试卷ID
				uni.navigateTo({
					url: `/pages/exam/detail?paperId=${paper.id}`
				});
			},
			// 获取状态样式（可根据实际状态扩展）
			getStateClass(status) {
				switch (status) {
					case '完成':
						return 'state-finished';
					default:
						return 'state-default';
				}
			}
		}
	};
</script>
<style lang="scss">
	.container {
		display: flex;
		height: 100vh;
		background-color: #fff;
		overflow: hidden;
	}

	/* 左侧侧边栏样式 */
	.sidebar {
		width: 160rpx;
		border-right: 1px solid #eee;

		.sidebar-item {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 28rpx;
			color: #666;
			border-left: 4rpx solid transparent;
			transition: all 0.3s;

			&.active {
				color: #3F9EFF;
				border-left-color: #3F9EFF;
				background-color: #f0f7ff;
			}

			&:hover {
				background-color: #f5f5f5;
			}
		}
	}

	/* 右侧主内容区样式 */
	.main-content {
		flex: 1;
		padding: 30rpx;
		overflow-y: auto;

		/* 试卷表格样式 */
		.paper-table {
			background-color: #fff;
			border-radius: 8rpx;
			overflow: hidden;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

			.table-header {
				display: flex;
				background-color: #f5f5f5;
				font-weight: bold;

				.header-col {
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					font-size: 26rpx;
					color: #666;
					border-right: 1px solid #eee;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.table-row {
				display: flex;
				border-bottom: 1px solid #eee;

				.row-col {
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					font-size: 28rpx;
					color: #333;
					border-right: 1px solid #eee;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			/* 状态样式 */
			.state-finished {
				color: #00B42A;
				background-color: #e1fae7;
				padding: 6rpx 12rpx;
				border-radius: 4rpx;
			}

			.state-default {
				color: #666;
			}

			/* 操作文本样式 */
			.operate-text {
				color: #3F9EFF;
				cursor: pointer;
				text-decoration: underline;
			}

			/* 空状态样式 */
			.empty-state {
				height: 200rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: #999;
			}
		}

		/* 分页样式 */
		.pagination {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 30rpx;

			.page-btn {
				padding: 10rpx 30rpx;
				margin: 0 20rpx;
				cursor: pointer;
				font-size: 26rpx;

				&.disabled {
					color: #ccc;
					border-color: #ccc;
					cursor: not-allowed;
				}
			}

			.page-info {
				font-size: 26rpx;
				color: #666;
			}
		}

		/* 分数弹窗样式 */
		.score-popup {
			position: fixed;
			right: 40rpx;
			top: 100rpx;
			width: 400rpx;
			background-color: #fff;
			border: 1px solid #eee;
			border-radius: 8rpx;
			padding: 20rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
			z-index: 999;

			.popup-content {
				.popup-row {
					display: flex;
					justify-content: space-between;
					margin-bottom: 15rpx;
					font-size: 26rpx;
					color: #333;

					.popup-label {
						font-weight: bold;
					}
				}

				.close-btn {
					text-align: center;
					margin-top: 20rpx;
					color: #3F9EFF;
					cursor: pointer;
					font-size: 26rpx;
					text-decoration: underline;
				}
			}
		}
	}
</style>